<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./leaflet.css" />
    <script src="./leaflet.js"></script>
    <script src="./js/geojson.js"></script>
    <title>leaflefttest</title>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        #map {
            height:100%;

        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
/*    var m = L.map("map", {
        center: [31.59, 120.29],
        zoom: 5,
        layers: [t],
        zoomControl: false
    });
   t.addTo(m);
   L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(m),
       L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(m),
       L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(m),
       L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(m);
    L.control.zoom({
        zoomInTitle: '放大',
        zoomOutTitle: '缩小'
    }).addTo(m);*/

   var map = L.map('map').setView([37.8, -96], 4);

   L.tileLayer('https://api.mapbox.com/styles/v1/zhangqin2018/cjh6a3y1051dj2rpejsb3g6oo/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiemhhbmdxaW4yMDE4IiwiYSI6ImNqaDYxdDdzNDA1ZWoyeHF4NmZiemI0ZjkifQ.XDWOmVTJ2Ucmo5eaUXiFWA', {
       maxZoom: 20,
       minZoom: 0
   }).addTo(map);


   // control that shows state info on hover
   var info = L.control();

   info.onAdd = function (map) {
       this._div = L.DomUtil.create('div', 'info');
       this.update();
       return this._div;
   };

   info.update = function (props) {
       this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
           '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
           : 'Hover over a state');
   };

   info.addTo(map);


   // get color depending on population density value
   function getColor(d) {
       return d > 1000 ? '#800026' :
           d > 500  ? '#BD0026' :
               d > 200  ? '#E31A1C' :
                   d > 100  ? '#FC4E2A' :
                       d > 50   ? '#FD8D3C' :
                           d > 20   ? '#FEB24C' :
                               d > 10   ? '#FED976' :
                                   '#FFEDA0';
   }

   function style(feature) {
       return {
           weight: 2,
           opacity: 1,
           color: 'white',
           dashArray: '3',
           fillOpacity: 0.7,
           fillColor: getColor(feature.properties.density)
       };
   }

   function highlightFeature(e) {
       var layer = e.target;

       layer.setStyle({
           weight: 5,
           color: '#666',
           dashArray: '',
           fillOpacity: 0.7
       });

       if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
           layer.bringToFront();
       }

       info.update(layer.feature.properties);
   }

   var geojson;

   function resetHighlight(e) {
       geojson.resetStyle(e.target);
       info.update();
   }

   function zoomToFeature(e) {
       map.fitBounds(e.target.getBounds());
   }

   function onEachFeature(feature, layer) {
       layer.on({
           mouseover: highlightFeature,
           mouseout: resetHighlight,
           click: zoomToFeature
       });
   }

   geojson = L.geoJson(statesData, {
       style: style,
       onEachFeature: onEachFeature
   }).addTo(map);

   map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');


   var legend = L.control({position: 'bottomright'});

   legend.onAdd = function (map) {

       var div = L.DomUtil.create('div', 'info legend'),
           grades = [0, 10, 20, 50, 100, 200, 500, 1000],
           labels = [],
           from, to;

       for (var i = 0; i < grades.length; i++) {
           from = grades[i];
           to = grades[i + 1];

           labels.push(
               '<i style="background:' + getColor(from + 1) + '"></i> ' +
               from + (to ? '&ndash;' + to : '+'));
       }

       div.innerHTML = labels.join('<br>');
       return div;
   };

   legend.addTo(map);

</script>
</body>
</html>